<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
      <li>
        <a href="https://vuejs.org" target="_blank"> Core Docs </a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank"> Forum </a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank"> Community Chat </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank"> Docs for This Template </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank"> Docs for This Template </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank"> Docs for This Template </a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank"> Docs for This Template </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank"> vue-router </a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank"> vuex </a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank"> vue-loader </a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank"> awesome-vue </a>
      </li>
      <li>{{ setTime }}</li>
      <li>{{setTime1()}}</li>
    </ul>
    <div>
      <p><input type="text" v-model="firstName"></p>
      <p><input type="text" v-model="lastName"></p>
      <p>{{fullName()}}</p>
    </div>
    <ul>
      <li>getLi</li>
      <li v-for="item in getLi">{{item}}</li>
    </ul>
    <button @click="myClick">添加数组值</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      list: {
        type: Array,
        default: [6, 7, 8, 9]
      }
    }
    ,
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        timeStr: 'aaa',
        twitter: 'twitter',
        firstName: 'Foo',
        lastName: 'Bar',
      }
    },
    created() {
      this.getStr();
    },
    methods: {
      myClick: function () {
        this.$emit('myClick', this.list.push(1))
      },
      affe: function () {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
      },
      getStr: function () {
        let _that = this;
        setTimeout(function () {
          _that.timeStr = 'bbb';
        }, 2000);
      },
      setTime1: function () {
        return this.twitter;
      },
      fullName: function () {
        return this.firstName + this.lastName;
      }
    },
    computed: {
      setTime: function () {
        return this.timeStr + Date.now();
      },
      getLi: function () {
        return this.list.map((item) => {
          return item * 2;
        });
      }
      // fullName:function(){
      //   return this.firstName + this.lastName;
      // }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
